<template>
  <div>
    <!-- -----------------------------------------------页面顶部用户信息栏 -->
    <div class="head public">
      <div class="user-inform">
        <div class="head-img"></div>
        <div class="infor">
          <div class="top">
            <div class="name">
              {{ name }}
            </div>
            <div class="icon"></div>
          </div>
          <div class="bottom"></div>
        </div>
      </div>
    </div>
    <!-- ------------------------------------------------name -->
    <div class="public name">
      <div class="title">昵称</div>
      <div class="all" v-show="state.name">
        <div class="text">{{ name }}</div>
        <div class="btn" @click="reviseName()">修改</div>
      </div>
      <!-- 修改昵称变化 -->
      <div class="all" v-show="!state.name" style="margin-top: 16px">
        <el-input
          v-model="obj.name"
          size="small"
          placeholder="请输入内容"
        ></el-input>
        <div>
          <el-button size="small">取消</el-button>
          <el-button size="small" type="primary" @click="reviseName()"
            >确定</el-button
          >
        </div>
      </div>
    </div>
    <!-- ------------------------------------------------性别 -->
    <div class="public sex">
      <div class="title">性别</div>
      <div class="all" v-show="state.sex">
        <div class="text">{{ sex }}</div>
        <div class="btn" @click="reviseSex()">修改</div>
      </div>
      <!-- 修改性别变化 -->
      <div class="all" v-show="!state.sex" style="margin-top: 16px">
        <div>
          <el-radio v-model="sex" label="男">男</el-radio>
          <el-radio v-model="sex" label="女">女</el-radio>
          <el-radio v-model="sex" label="保密">保密</el-radio>
        </div>
        <div>
          <el-button size="small">取消</el-button>
          <el-button size="small" type="primary" @click="reviseSex()"
            >确定</el-button
          >
        </div>
      </div>
    </div>
    <!-- --------------------------------------------------------介绍 -->

    <div class="public">
      <div class="title">介绍</div>
      <div class="all">
        <div class="text">{{ brief }}</div>
        <div class="btn" @click="reviseBrief()">修改</div>
      </div>
    </div>
    <!-- ---------------------------------------------------安全设置 -->
    <div class="safe">
      <!-- 修改手机号码对话框 -->
      <el-dialog
        title="更换手机"
        width="30%"
        :visible.sync="state.revisePhone"
        top="30vh"
      >
        <span>确定更换手机{{ phone }}吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="revisePhoneS()">取 消</el-button>
          <el-button type="primary" @click="revisePhoneS(1)">确 定</el-button>
        </span>
      </el-dialog>
      <div class="title">安全设置</div>
      <div class="safe-content">
        <div class="phone">
          <div class="all">
            <div class="text" style="margin-top: 16px">绑定手机</div>
            <div class="all-c">
              <div class="num">{{ phone }}</div>
              <div class="btn" @click="revisePhoneS()">更换手机</div>
            </div>
          </div>
        </div>
        <div class="password">
          <div class="all">
            <div class="text" style="margin-top: 16px">修改密码</div>
            <div class="btn">修改</div>
          </div>
        </div>
      </div>
    </div>
    <!-- -------------------------------------------------绑定微信抖音账号 -->
    <div class="bind-num">
      <div class="title">绑定微信/抖音号</div>
      <div class="password">
        <div class="all">
          <div class="wx-icon">
            <div class="icon"></div>
            <div class="text" style="margin-top: 16px">微信账号</div>
          </div>
          <div class="btn">解除绑定</div>
        </div>
      </div>
      <div class="phone">
        <div class="all">
          <div class="wx-icon">
            <div class="icon"></div>
            <div class="text" style="margin-top: 16px">抖音账号</div>
          </div>
          <div class="all-c">
            <div class="num">别踩我的小白菜</div>
            <div class="btn">立即绑定</div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 1px; height: 100px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: 'zhangs' },
      name: 'javaScript',
      sex: '男',
      phone: '13193580444',
      brief:
        '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
      state: {
        //修改
        name: true,
        sex: true,
        brief: false, //控制修改介绍弹出框
        revisePhone: false,
        revisePassword: true,
        bindWx: true,
      },
    }
  },
  watch: {
    obj: {
      handler: (val, nval) => {
        console.log(val, nval)
      },
      deep: true,
    },
  },
  methods: {
    reviseName() {
      this.state.name = !this.state.name
      console.log(this.state.name)
    },
    reviseSex() {
      this.state.sex = !this.state.sex
    },
    reviseBrief() {
      this.state.brief = !this.state.brief
    },
    revisePhoneS(res) {
      this.state.revisePhone = !this.state.revisePhone
      if (res) {
        console.log(true)
      }
    },
  },
}
</script>
<style scoped lang="scss">
// 公共样式
.public {
  width: 1040px;
  height: 106px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-sizing: border-box; //加padding盒子不会撑大
  background-color: #fff;
}

.title {
  font-size: 16px;
  color: #888a95;
  line-height: 22px;
}

.text {
  font-size: 14px;
  color: #37383c;
  line-height: 20px;
  margin-top: 24px;
}

.all {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .wx-icon {
    display: flex;
  }

  .icon {
    width: 22px;
    height: 22px;
    background-color: black;
    margin-top: 16px;
    margin-right: 10px;
  }

  .btn {
    font-size: 14px;
    color: #4e70f2;
    height: fit-content;
    margin-top: 24px;
    cursor: pointer;
  }

  .all-c {
    display: flex;

    .num {
      font-size: 14px;
      color: #888a95;
      line-height: 20px;
      margin-top: 24px;
      margin-right: 20px;
    }
  }
}

//顶部用户信息详情样式
.head {
  display: flex;
  align-items: center;
  width: 1040px;
  height: 160px;
  background-color: #fff;
  margin-bottom: 20px;

  .user-inform {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: left;

    .head-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: black;
      margin-right: 30px;
    }

    .infor {
      width: 580px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .top {
        height: 28px;
        width: 100%;
        display: flex;
        align-items: center;

        .name {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 700;
          color: #37383c;
          line-height: 28px;
        }

        .icon {
          width: 20px;
          height: 20px;
          background-color: pink;
          margin-left: 8px;
        }
      }

      .bottom {
        height: 20px;
        width: 100%;
        margin-top: 14px;
        background-color: rgb(105, 153, 207);
      }
    }
  }
}

//安全设置板块样式
.safe {
  width: 1040px;
  height: 145px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-sizing: border-box; //加padding盒子不会撑大

  .safe-content {
    width: 100%;
  }
}

// 绑定微信/抖音号板块
.bind-num {
  width: 1040px;
  height: 145px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-sizing: border-box; //加padding盒子不会撑大
}
</style>
